<template>
  <div>
    <el-card style="margin-top: 20px">
      <el-table :data="skuList" v-loading="loading">
        <el-table-column label="序号" type="index"></el-table-column>
        <el-table-column label="名称" prop="skuName"></el-table-column>
        <el-table-column label="描述" prop="skuDesc"></el-table-column>
        <el-table-column label="默认图片">
          <template #="{ row }">
            <img :src="row.skuDefaultImg" alt="" width="150" height="100" />
          </template>
        </el-table-column>
        <el-table-column label="重量(KG)" prop="weight"></el-table-column>
        <el-table-column label="价格(元)">
          <template #="{ row }">
            {{ row.price.toFixed(2) }}
          </template>
        </el-table-column>
        <el-table-column label="操作" width="350px">
          <template #="{ row }">
            <el-button
              type="info"
              icon="ele-Bottom"
              @click="getCancelSale(row)"
              v-if="row.isSale"
            ></el-button>
            <el-button
              v-else
              type="success"
              icon="ele-Top"
              @click="getOnSale(row)"
            ></el-button>
            <el-button
              type="primary"
              icon="ele-Edit"
              @click="ElMessage.warning('功能在开发中')"
            ></el-button>
            <el-button
              type="info"
              icon="ele-InfoFilled"
              @click="getDetail(row.id)"
            ></el-button>

            <el-popconfirm title="是否删除" @confirm="getDelete(row)">
              <template #reference>
                <el-button type="danger" icon="ele-Delete"></el-button>
              </template>
            </el-popconfirm>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        v-model:current-page="current"
        v-model:page-size="pageSize"
        :total="total"
        layout="prev,pager,next,jumper,->,size,total"
      ></el-pagination>
      <el-drawer
        v-model="darwerFlag"
        title="I am the title"
        :with-header="false"
        size="50%"
      >
        <el-row>
          <el-col class="col-left" :span="4">名称</el-col>
          <el-col :span="12" :offset="2">{{ detail?.skuName }}</el-col>
        </el-row>
        <el-row>
          <el-col class="col-left" :span="4">描述</el-col>
          <el-col :span="12" :offset="2">{{ detail?.skuDesc }}</el-col>
        </el-row>

        <el-row>
          <el-col class="col-left" :span="4">价格</el-col>
          <el-col :span="12" :offset="2">{{ detail?.price.toFixed(2) }}</el-col>
        </el-row>
        <el-row>
          <el-col class="col-left" :span="4">平台属性</el-col>
          <el-col :span="12" :offset="2"
            ><el-tag v-for="item in detail?.skuAttrValueList" :key="item.id">
              {{ item.attrName }}:{{ item.valueName }}
            </el-tag></el-col
          >
        </el-row>
        <el-row>
          <el-col class="col-left" :span="4">销售属性</el-col>
          <el-col :span="12" :offset="2"
            ><el-tag
              v-for="item in detail?.skuSaleAttrValueList"
              :key="item.id"
            >
              {{ item.saleAttrName }}:{{ item.saleAttrValueName }}
            </el-tag></el-col
          >
        </el-row>
        <el-row>
          <el-col class="col-left" :span="4">图片列表</el-col>
          <el-col :span="12" :offset="2">
            <el-carousel>
              <el-carousel-item
                v-for="item in detail?.skuImageList"
                :key="item.id"
              >
                <img :src="item.imgUrl" alt="" width="100" />
              </el-carousel-item>
            </el-carousel>
          </el-col>
        </el-row>
      </el-drawer>
    </el-card>
  </div>
</template>
<script lang="ts">
import { defineComponent } from "vue";
import { ElMessage } from "element-plus";
import * as api from "@/api/sku";
export default defineComponent({
  name: "Sku",
});
</script>
<script setup lang="ts">
import { ref, watchEffect, computed } from "vue";
import { reqSkuList } from "@/api/sku";
import type { findBySpuIdType, newFindBySpuIdType } from "@/api/sku";
//1-列表
const skuList = ref<findBySpuIdType[]>([]);
//页码
const current = ref<number>(1);
const pageSize = ref<number>(5);
const total = ref<number>(0);
//1-1获取列表函数
//1-2loading
const loading = ref<boolean>(false);
const getSkuList = async () => {
  try {
    loading.value = true;
    let result = await reqSkuList(current.value, pageSize.value);
    skuList.value = result.records;
    current.value = result.current;
    pageSize.value = result.size;
    total.value = result.total;
  } catch (e) {
    ElMessage.error("获取失败");
  } finally {
    loading.value = false;
  }
};
watchEffect(getSkuList);
//2上架
const getOnSale = async (row: findBySpuIdType) => {
  try {
    await api.reqOnSale(row.id);
    ElMessage.success("上架成功");
    getSkuList();
  } catch (e) {
    ElMessage.error("上架失败");
  }
};
//下架
const getCancelSale = async (row: findBySpuIdType) => {
  try {
    await api.reqCancelSale(row.id);
    ElMessage.success("下架成功");
    getSkuList();
  } catch (e) {
    ElMessage.error("下架失败");
  }
};
//删除
const getDelete = async (row: findBySpuIdType) => {
  try {
    await api.reqDelete(row.id);
    ElMessage.success("删除成功");
    getSkuList();
  } catch (e) {
    ElMessage.error("删除失败");
  }
};
//获取详情

const detail = ref();
const getDetail = async (id: Number) => {
  detail.value = await api.reqSkuDetail(id as number);
};
//设置抽屉是否打开
const darwerFlag = computed({
  get() {
    return Boolean(detail.value);
  },
  set() {
    detail.value = undefined;
  },
});
</script>
<style scoped>
.col-left {
  text-align: right;
  font-size: 20px;
  font-weight: 800;
}
</style>
